<template>
  <a-drawer
    closable
    title='明细'
    placement='right'
    width='1000px'
    height='100%'
    :visible='visible'
    @close='close'
  >
    <a-card :bordered='false' style='overflow-y: scroll;height:calc(100vh - 55px - 73px)'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <a-col :md='24' :sm='24'>
            <div class='topFormItem'>
              <a-col :md='12' :sm='24'>
                <a-form-item
                  :labelCol='labelCol'
                  :wrapperCol='wrapperCol'
                  label='上账金额'>
                  <a-input placeholder='请输入上账金额' :disabled='true' v-decorator="['accountFee']"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='12' :sm='24'>
                <a-form-item
                  :labelCol='labelCol'
                  :wrapperCol='wrapperCol'
                  label='冻结金额'>
                  <a-input placeholder='请输入冻结金额' :disabled='true' v-decorator="['frozenFee']"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='12' :sm='24'>
                <a-form-item
                  :labelCol='labelCol'
                  :wrapperCol='wrapperCol'
                  label='已使用金额'
                >
                  <a-input placeholder='请输入已使用金额' :disabled='true' v-decorator="['usedFee']"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='12' :sm='24'>
                <a-form-item
                  :labelCol='labelCol'
                  :wrapperCol='wrapperCol'
                  label='可用余额'
                >
                  <a-input placeholder='请输入明细编码' :disabled='true' v-decorator="['balance']"></a-input>
                </a-form-item>
              </a-col>
            </div>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='编码'
            >
              <a-input placeholder='请输入费用池明细编码' v-model='queryParam.poolDetailCode'></a-input>
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='来源编码'>
              <a-input placeholder='请输入来源编码' v-model='queryParam.payCode'></a-input>
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <div class='button'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
            </div>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-table
              style='min-height:400px'
              ref='table'
              bordered
              size='middle'
              :scroll="{
              x:'max-content'
               }"
              rowKey='id'
              :columns='columns'
              :dataSource='dataSource'
              :pagination='ipagination'
              :loading='loading'
              class='j-table-force-nowrap'
              @change='handleTableChange'>
              <span slot='action' slot-scope='text,record'>
                <span v-if='record.enclosureList.length > 0'>
               <a v-newDownJs='{picList: record.enclosureList,picName:"enclosureName",picUrl:"enclosure"}'>点击下载</a>
                </span>
                        <span v-if='record.enclosureList.length == 0'>
               <a :href='record.enclosureList[0]'>暂无附件</a>
                </span>
              </span>
            </a-table>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <div class='btn'>
      <a-button @click='close' type='primary' style='margin-right: 2em'>关闭</a-button>
      <a-button type='primary' icon='download' @click='close'>确定</a-button>
      <!--      @click="downExportXls('zhantuBalanceDetail_service')"-->
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, httpAction, postAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
import pick from 'lodash.pick'
import { newDownJs } from '@/directive/downLoadUrl'


export default {
  name: 'roolModaldetail',
  mixins: [PageListMixin],
  directives:{ newDownJs },
  components: {
    ARangePicker,
    ARow
  },
  data() {
    return {
      form: this.$form.createForm(this),
      title: '',
      visible: false,
      disableMixinCreated: true,
      model: {},
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      superQueryParams: '',
      searchConfig: [
        {
          // label:'订单编号',
          type: 'input',
          name: 'exampleCode',
          placeholder: '请输入示例编码'
        }, {
          // label:'业务员',
          type: 'input',
          name: 'exampleName',
          placeholder: '请输入示例名称'
        }, {
          // label:'订单状态',
          type: 'a-select',
          name: 'exampleType',
          option: [
            {
              name: '采集要求',
              value: '1'
            },
            {
              name: '核销要求',
              value: '2'
            }
          ],
          placeholder: '请选择类型'
        }, {
          type: 'a-select',
          name: 'status',
          option: [{
            name: '启用',
            value: '009'
          }, {
            name: '停用',
            value: '003'
          }],
          placeholder: '请选择状态'
        }
      ],
      columns: [
        {
          title: '费用池明细编码',
          align: 'center',
          dataIndex: 'poolDetailCode'
        },
        {
          title: '操作类型',
          align: 'center',
          dataIndex: 'payTypeStr'
        },
        {
          title: '操作时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作人',
          align: 'center',
          dataIndex: 'createName'
        },
        {
          title: '订单编码',
          align: 'center',
          dataIndex: 'payCode'
        },
        {
          title: '活动编码',
          align: 'center',
          dataIndex: 'actCode'
        },
        {
          title: '活动名称',
          align: 'center',
          dataIndex: 'actName'
        },
        {
          title: '上账金额',
          align: 'center',
          dataIndex: 'itemAccountFee'
        },
        {
          title: '已用金额',
          align: 'center',
          dataIndex: 'itemUsedFee'
        },
        {
          title: '占用金额',
          align: 'center',
          dataIndex: 'itemFrozenFee'
        },
        {
          title: '可用金额',
          align: 'center',
          dataIndex: 'itemAmount'
        },
        {
          title: '附件',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      qyeryParams: {
        date: []
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: window._CONFIG['domianURL'] + '/fee/cnFeePool/findDetailPageListByCode'
      }
    }
  },
  methods: {
    searchReset() {
      let queryParam = { poolCode: this.queryParam.poolCode }
      this.queryParam = queryParam
      this.loadData(1)
    },
    add() {
      this.edit({})
    },
    edit(record) {
      console.log(record)
      this.queryParam = {}
      if (record.poolCode) {
        this.queryParam.poolCode = record.poolCode
      }
      this.model = Object.assign({}, record)
      this.loadData()
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'balance', 'usedFee', 'frozenFee', 'accountFee'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys[0] = selectedRowKeys
    },
    downExportXls(key) {
      const downurl = window._CONFIG['domianURL'] + '/cnDownloadController/saveOrUpdate'
      if (!key || typeof key != 'string') {
        this.$message.warning('未配置接口标记！')
        return
      }
      let param = {
        accountCode: this.queryParam.accountCode,
        companyCode: this.queryParam.companyCode,
        accountType: this.queryParam.accountType,
        yearBalance: this.queryParam.yearBalance,
        startDate: this.queryParam.startDate,
        endDate: this.queryParam.endDate,
        type: this.queryParam.type
      }
      console.log(param)
      let expParams = JSON.stringify(param)
      // expParams = escape(expParams)
      console.log(Base64.encode(expParams))
      postAction(downurl, { impKey: key, expParams: Base64.encode(expParams) }).then((res) => {
        if (res.success) {
          this.$message.info(res.message + ',等待下载完成！')
        } else {
          this.$message.warn(res.message)
        }
      })
    },

    handleOk() {
      let data
      const that = this
      that.$emit('ok', this.selectedRowKeys, this.selectionRows[0])
      that.confirmLoading = false
      that.close()
    },
    handleCancel() {
      this.close()
    },

    dateRangeChange(date) {
      if (!date) {
        this.queryParam.startDate = ''
        this.queryParam.endDate = ''
        return
      }
      this.queryParam.startDate = date[0]
      this.queryParam.endDate = date[1]
    }
  }

}
</script>

<style scoped>
.btn {
  z-index: 9999;
  background-color: #FFFFFF;
  position: absolute;
  bottom: 0;
  width: 96%;
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  text-align: right;
}

.flex {
  display: flex;

}

.wrap {
  flex-wrap: wrap;
}

.items {
  display: flex;
  align-items: center;
  width: 50%;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.items-text {
  width: 60px;
  margin-right: 10px;
  text-align: right;
}

.button {
  width: 200px;
  flex-shrink: 0;
}

.topFormItem {
  padding: 18px;
  border-bottom: 1px solid #c5c5c5;
  margin-bottom: 15px;
  width: 100%;
  min-height: 200px;
}
</style>
